<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
          <z-form-item
            :datas="fieldArr"
            :form="queryParam"
            :gutter="8"
            :submitAction="{show: true, toggle: true, span: 8}"
            @onSubmit="onQuery"
            @onReset="onResetForm"
          />
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <div>
          <a-button @click="handleExport">导出</a-button>
        </div>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table
          ref="table"
          rowKey="id"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRow="onSelectedRow"
          @change="onTableChange"
        />
      </div>
      <!--弹窗区域-->
      <handle-modal ref="handleModalRef" @ok="modalFormOk" />
    </a-card>
  </div>
</template>

<script>
import * as personServiceApi from '@/api/sjsk/personService'
import handleModal from '../../../modules/handleModal'
import { downLoadFileReader } from '@/utils/export-util/util'

export default {
  components: { handleModal },
  data() {
    return {
      loading: false,
      isDisabled: true,
      selectKeys: [],
      queryParam: {},
      /* 查询折叠 */
      toggleSearchStatus: false,
      fieldArr: [
        {label: '吸毒人员姓名', prop: 'name', tagType: 'input', span: 8},
        {label: '吸毒人员身份证', prop: 'identityCard', tagType: 'input', span: 8},
        {label: '人员类型', prop: 'personType', tagType: 'dict-select', dictCode:'personType', span: 8, toggle: false},
        {label: '性别', prop: 'sex', tagType: 'dict-select', dictCode:'sex', span: 8, toggle: false},
        {
          label: '异地管控情况', 
          prop: 'controlStatus', 
          tagType: 'dict-select',
          dictOptions: [
            { text: '请选择', value: '' },
            { text: '异地管控', value: '1' },
            { text: '已撤销', value: '2' },
          ],
          span: 8,
          toggle: false
        }
      ],
      columns: [
        {
          title: '姓名',
          dataIndex: 'realName',
          width: 60,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '性别',
          dataIndex: 'sex',
          width: 60,
          align: 'center',
          customRender: text => {
            return this.$filterDictTextByCache('sex', text)
          }
        },
        {
          title: '身份证号',
          dataIndex: 'identityCard',
          width: 110,
          align: 'left',
          customRender: text => {
            return <j-ellipsis value={text} length={20} />
          }
        },
        {
          title: '人员类型',
          dataIndex: 'personType',
          width: 80,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={this.$filterDictTextByCache('personType', text)} length={14} />
          }
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
          width: 70,
          align: 'center'
        },
        {
          title: '居住地专职人员',
          dataIndex: 'belongManagerName',
          width: 80,
          align: 'center'
        },
        {
          title: '居住地区',
          dataIndex: 'currentTown',
          width: 100,
          align: 'center'
        },
        {
          title: '户籍地区',
          dataIndex: 'householdTown',
          width: 100,
          align: 'center'
        },
        {
          title: '异地管控情况',
          dataIndex: 'controlStatus',
          width: 90,
          align: 'center',
          customRender: (text, record, index) => {
            return (
              <span> {text === 1 ? '异地管控' : text === 2 ? '已撤销' : ''} </span>
            )
          }
        },
        {
          title: '是否结案',
          dataIndex: 'isCloseCase',
          width: 80,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={this.$filterDictTextByCache('dict_yn', text)} length={14} />
          }
        },
        {
          title: '操作',
          width: 60,
          align: 'center',
          dataIndex: 'action',
          customRender: (text, record, index) => {
            return (
              <a-space size={6}>
                <a-button type="link" style={'padding:0'} onClick={event => this.handleRouter(record)}>查看</a-button>
                {record.controlStatus==1?
                <a-button type="link" style={'padding:0'} onClick={event => this.handleModal('exception-reporting', record)}>异常上报</a-button>
                :
                <a-button type="link" style={'padding:0'} onClick={event => this.handleModal('archived-materials', record)}>存档材料</a-button>
                }
              </a-space>
            )
          },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {}
    }
  },
  mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.queryParam = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      this.$set(this.queryParam, 'inOutType', 2)
      this.$set(this.queryParam, 'controlPersonType', 2)
      let queryParam = Object.assign({}, this.queryParam, this.pageFilter)
      this.loading = true
      personServiceApi
        .getOutsideList(queryParam)
        .then((res) => {
          this.loading = false
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warn(res.message?res.message: '请求失败！')
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 导出
    handleExport(record) {
      let that = this
      let selectList = this.$refs.table.getSelectedRows()
      let idList1 = selectList.map(v => v.id).filter(obj => obj !== null && obj !== undefined && obj !== '')
      let idList2 = record && Object.keys(record).length > 0 && record.id ? [record.id] : []
      let params = Object.assign(
        {},
        {
          idList: selectList.length > 0 ? idList1 : idList2,
          queryOutsideControlPersonVO: this.queryParam
        }
      )
      this.$confirm({
        title: `是否确认导出？`,
        okText: '确定',
        onOk() {
          personServiceApi.outsideExport(params).then(async res => {
            const fileName = '社会面-省外异地管控列表数据.xlsx'
            await downLoadFileReader(res, fileName)
            that.$refs.table.onClearRowKeys()
          })
        }
      })
    },
    handleRouter(record) {
      let id = record instanceof Object?record.id: record
      let path = id?`/examine/details/5/${id}`:``
      this.$router.push({
        path: path,
        query: {},
      })
    },
    modalFormOk() {},
    // 弹窗操作
    handleModal(key, record) {
      this.$refs.handleModalRef.show(key, record)
      // this.$refs.handleModalRef.type = type
      // this.$refs.handleModalRef.disableSubmit = false
    }
  }
}
</script>

<style scoped lang="less"></style>
